﻿<%@ Page Title="Home page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeBehind="Default.aspx.vb" Inherits="TimelineVB._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <style type="text/css">
        ._availabilityTable
        {
            border: solid 1px #333;
            width: 930px;
        }
        ._availabilityTable td
        {
            border: solid 1px #ccc;
            height: 25px !important;
        }
        ._weekend
        {
            background-color: #ddd;
            border: solid 1px #ccc;
        }
        
        ._availabilitylegend
        {
            background-color: #ccc;
        }
        ._availabilitylegend td.available span, ._availabilitylegend td.not_available span, ._availabilitylegend td._ball span
        {
            -moz-border-radius: 5px;
            border-radius: 5px;
            display: block;
        }
        ._availabilitylegend td.available span
        {
            background-color: #B9F5B3;
            width: 30px;
            height: 16px;
        }
        ._availabilitylegend td.not_available span
        {
            background-color: #F2A5C4;
            width: 30px;
            height: 16px;
        }
        ._availabilitylegend td._ball span
        {
            border: solid 1px black;
            background-color: white;
            width: 16px;
            height: 16px;
            -moz-border-radius: 16px;
            border-radius: 16px;
        }
        
        
        ._availabilityTable td
        {
            vertical-align: top;
            position: relative;
        }
        ._availabilityTable td
        {
            vertical-align: top;
            position: relative;
        }
        ._availabilityTable td div span
        {
            position: absolute;
            -moz-border-radius: 16px;
            -webkit-border-radius: 16px;
            border-radius: 16px;
            height: 15px;
        }
        ._availabilityTable td div.available span
        {
            background-color: #B9F5B3;
            border-color: #ccc;
        }
        ._availabilityTable td div.not_available span
        {
            background-color: #F2A5C4;
            border-color: #ccc;
        }
        ._availabilityTable td div._ball span
        {
        }
        ._availabilityTable td._day_cell
        {
            width: 25px;
        }
    </style>
    <asp:ScriptManager runat="server" ID="_scriptmanager"></asp:ScriptManager>
    <asp:UpdatePanel ID="up" UpdateMode="Conditional">
        <ContentTemplate>
            <table style="width: 930px;" cellsspacing="0" cellpadding="0" class="_availability_header">
                <tr>
                    <td>
                        <table>
                            <tr>
                                <td>
                                    <asp:ImageButton ID="btn_prev" runat="server" Width="16px" Height="16px" AlternateText="Previous"
                                        ImageUrl="~/img/Button-Previous-icon.png" />
                                </td>
                                <td>
                                    <asp:ImageButton ID="btn_next" runat="server" Width="16px" Height="16px" AlternateText="Next"
                                        ImageUrl="~/img/Button-Next-icon.png" />
                                </td>
                                <td>
                                    <asp:Label runat="server" ID="mText"></asp:Label>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
            <asp:Table runat="server" ID="c_timeline" CssClass="_availabilityTable" CellPadding="0"
                CellSpacing="0" />
            <table style="width: 930px;" cellsspacing="0" cellpadding="0" class="_availabilitylegend">
                <tr>
                    <td style="width: 30px;" class="available">
                        <span></span>
                    </td>
                    <td style="width: 100px;">
                        <span>Available</span>
                    </td>
                    <td style="width: 30px;" class="not_available">
                        <span></span>
                    </td>
                    <td style="width: 100px;">
                        <span>Not Available</span>
                    </td>
                    <td style="width: 30px;" class="_ball">
                        <img src="img/Soccer-icon.png" height="16px" width="16px" />
                    </td>
                    <td style="width: 100px;">
                        <span>Match Planned</span>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>
